<template>
  <div class="hello">
    <h1>{{ msg }}-{{id}}</h1>
    <p class="btn" id="alert1">alert1</p>
    <p>{{ title }}</p>
    <p><img :src="src" width="100px" :title="title"/></p>
    <p v-for="p in items">
    <img :src="p.img" width="100px" :title="p.title"/>
    </p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      items: [],
    id:'',
    title:'1',
    src:''
    }
  },
  created () {   /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
    this.id = this.$route.query.id;
    this.$http.get('/api/detail').then((data) => {   /* 调用vue的ajax来请求数据，promise语法，并用es6的箭头函数 */
      this.items = data.body.data;
      this.title = this.items[this.id].title;
      this.src = this.items[this.id].img;
      });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

   


